<template>
  <div style="background-color: #fff; padding-bottom: 1rem">
    <el-table
      v-for="(pitem, pindex) in tableData"
      :index="pindex"
      :data="pitem.data"
      :span-method="spanMethod"
      :header-cell-style="{ background: '#FAFBFD', color: '#6D6D6D'}"
      style="width: 100%; margin-bottom: 3rem;"
      :show-header="pindex === 0"
      border
      height="330"
    >
      <el-table-column
        v-for="(item, index) in tableTitles"
        :prop="index"
        :label="item"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    dataSource: { type: Function, default: () => {} }
  },
  data() {
    return {
      tableTitles: {
        Condition: '条件',
        Content: '内容',
        TotalCount: '数量',
        Proportion: '所占百分比',
        HaveMobileCount: '带联系方式',
        HaveMobileProportion: '带联系方式所占百分比'
      },
      tableData: []
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      this.dataSource()().then(res => {
        if (res.code === 200) {
          res.data.FormData.forEach((item, index) => {
            item.data.map((i, j) => {
              res.data.FormData[index].data[j].Condition = item.name
              res.data.FormData[index].data[j].Count = item.data.length
            })
          })

          this.tableData = res.data.FormData
        }
      })
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return rowIndex === 0 ? [row.Count, 1] : [0, 0]
      }
    },
  }
}
</script>

<style scoped>

</style>
